﻿@model ERCS.ViewModel.HomeVMs.FrontPageVM
@using Newtonsoft.Json;
@using WalkingTec.Mvvm.Core.Extensions;

<div class="layui-row layui-col-space15" id="frontpage">
    <div class="layui-col-md12">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        确诊
                        <span><i class="layui-icon layui-icon-tabs"></i></span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font">@Model.ChinaInfo[ERCS.Model.PatientStatusEnum.QueZhen]</p>
                    </div>
                </div>
            </div>

            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        疑似
                        <span><i class="layui-icon layui-icon-help"></i></span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font">@Model.ChinaInfo[ERCS.Model.PatientStatusEnum.YiSi]</p>
                    </div>
                </div>
            </div>

            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        治愈
                        <span><i class="layui-icon layui-icon-face-smile"></i></span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font">@Model.ChinaInfo[ERCS.Model.PatientStatusEnum.ZhiYu]</p>
                    </div>
                </div>
            </div>

            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        死亡
                        <span><i class="layui-icon layui-icon-friends"></i></span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font">@Model.ChinaInfo[ERCS.Model.PatientStatusEnum.SiWang]</p>
                    </div>
                </div>
            </div>


            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">世界疫情</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                             lay-filter="LAY-index-dataview">
                            <div carousel-item id="LAY-index-dataview">
                                <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="layui-col-md12">

                <div class="layui-card">
                    <div class="layui-card-header">中国疫情分布</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-sm4">
                                <table class="layui-table layuiadmin-page-table" lay-skin="line">
                                    <thead>
                                        <tr>
                                            <th>排名</th>
                                            <th>地区</th>
                                            <th>人数</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @{ 
                                            int count = 1;
                                            foreach (var key in Model.MapInfo.Keys)
                                            {
                                                <tr><td>@count</td><td>@key</td><td>@Model.MapInfo[key]</td></tr>
                                                count++;
                                                if (count > 10) break;
                                            }
                                        }
                                    </tbody>
                                </table>
                            </div>
                            <div class="layui-col-sm8">
                                <div id="map" style="height:400px;"><i class="layui-icon layui-icon-loading1 layadmin-loading"></i>读取数据中</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


</div>
<script>
    $("#frontpage").parent().css("background-color", "#eee");

    //区块轮播切换
    layui.use(['admin', 'carousel'], function () {
        var $ = layui.$
            , admin = layui.admin
            , carousel = layui.carousel
            , element = layui.element
            , device = layui.device();

        //轮播切换
        $('.layadmin-carousel').each(function () {
            var othis = $(this);
            carousel.render({
                elem: this
                , width: '100%'
                , arrow: 'none'
                , interval: othis.data('interval')
                , autoplay: othis.data('autoplay') === true
                , trigger: (device.ios || device.android) ? 'click' : 'hover'
                , anim: othis.data('anim')
            });
        });

        element.render('progress');

    });

    //数据概览
    layui.use(['admin', 'carousel', 'echarts'], function () {
        var $ = layui.$
            , admin = layui.admin
            , carousel = layui.carousel
            , echarts = layui.echarts;

        var map;
        $.get('layui/china.json', function (gansuJson) {

            echarts.registerMap('china', gansuJson);
            var mapoption =
            {
                title: {
                    text: '',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'item'
                },
                dataRange: {
                    orient: 'horizontal',
                    min: 0,
                    max: 1000,
                    text: ['高', '低'],
                    splitNumber: 0
                },
                series: [
                    {
                        name: '确诊数量',
                        type: 'map',
                        mapType: 'china',
                        selectedMode: 'multiple',
                        itemStyle: {
                            normal: { label: { show: true } },
                            emphasis: { label: { show: true } }
                        },
                        data: [
                            @foreach (var item in Model.MapInfo)
                            {
                                @Html.Raw($"{{\"name\":\"{item.Key}\", \"value\":{item.Value}}},")
                            }
                        ]
                    }
                ]
            }

            map = echarts.init(document.getElementById('map'), layui.echartsTheme);
            map.setOption(mapoption);
        });


        var echartsApp = [], options = [
            //今日流量趋势
            {
                title: {
                    text: '世界疫情趋势',
                    x: 'center',
                    textStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['日期', '人数']
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data:[@Html.Raw(Model.WorldInfo.Keys.Select(x=>"'"+x.ToShortDateString()+"'").ToSpratedString())]
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '确诊',
                    type: 'line',
                    smooth: true,
                    itemStyle: { normal: { areaStyle: { type: 'default' } } },
                    data: [@Model.WorldInfo.Values.Select(x=>x.ToString()).ToSpratedString()]
                }]
            }
        ]
            , elemDataView = $('#LAY-index-dataview').children('div')
            , renderDataView = function (index) {
                echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
                echartsApp[index].setOption(options[index]);
                //window.onresize = echartsApp[index].resize;
                admin.resize(function () {
                    echartsApp[index].resize();
                    if (map != null) {
                        map.resize();
                    }
                });
            };


        //没找到DOM，终止执行
        if (!elemDataView[0]) return;

        renderDataView(0);

        //监听数据概览轮播
        var carouselIndex = 0;
        carousel.on('change(LAY-index-dataview)', function (obj) {
            renderDataView(carouselIndex = obj.index);
        });

        //监听侧边伸缩
        layui.admin.on('side', function () {
            setTimeout(function () {
                renderDataView(carouselIndex);
            }, 300);
        });

        //监听路由
        layui.admin.on('hash(tab)', function () {
            layui.router().path.join('') || renderDataView(carouselIndex);
        });
    });

</script>
